var webpack = require("webpack");
var path = require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const svgDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
  // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 2. 自己私人的 svg 存放目录
];
let ROOT_PATH = path.resolve(__dirname);
let APP_PATH = path.resolve(ROOT_PATH, 'app'); // 源码的目录
module.exports = (options = {}) => {
return {
    entry: {
        vendor: [
            "jquery", 
            "font-awesome-loader",
            "moment",
            'react',
            'react-dom',
            'redux',
            'react-redux',
            'react-router',
            'redux-thunk',
            'antd-mobile'
        ],
        app: './app/index.jsx'
    },
      
    devtool:  options.dev ? 'source-map' : 'none',　　// 调试时定位到编译前的代码位置，推荐安装react插件
    output: {
        path: path.resolve(__dirname, "./app/dist/"),
        /*
        entry字段配置的入口js的打包输出文件名
        [name]作为占位符, 在输出时会被替换为entry里定义的属性名, 比如这里会被替换为"index"
        [chunkhash]是打包后输出文件的hash值的占位符, 把?[chunkhash]跟在文件名后面可以防止浏览器使用缓存的过期内容,
        这里, webpack会生成以下代码插入到index.html中:
        <script type="text/javascript" src="/assets/index.js?d835352892e6aac768bf"></script>
        这里/assets/目录前缀是output.publicPath配置的

        options.dev是命令行传入的参数. 这里是由于使用webpack-dev-server启动开发环境时, 是没有[chunkhash]的, 用了会报错
        因此我们不得已在使用webpack-dev-server启动项目时, 命令行跟上--env.dev参数, 当有该参数时, 不在后面跟[chunkhash]
        */
        filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
        /*
        import()加载的文件会被分开打包, 我们称这个包为chunk, chunkFilename用来配置这个chunk输出的文件名.

        [id]: 编译时每个chunk会有一个id.
        [chunkhash]: 这个chunk的hash值, 文件发生变化时该值也会变. 文件名加上该值可以防止浏览器读取旧的缓存文件.
        */
        //chunkFilename: '[id].js?[chunkhash]',
    },
    module: {
        rules: [{
            test: /\.jsx|\.js?$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react','stage-1']
            }
        }, 
        { // 处理在js中引用scss文件
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader','sass-loader'],
                fallback: 'style-loader'
            }),
        },
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader','less-loader'],
                fallback: 'style-loader'
            }),
        },{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader'],
                fallback: 'style-loader'
            })
        },
        {// 处理图片操作  25000bit ~3kb
            test: /\.(png|jpg|jpeg|gif)$/,
            use: 'url-loader?limit=10000'
        },
        {// 处理字体文件
            test: /\.(otf|eot|woff|ttf|woff2|svg)$/,
            use: 'file-loader?limit=10000&name=fonts/[hash].[ext]'
        },{
            test: /\.(svg)$/i,
            loader: 'svg-sprite-loader',
            include: [
              require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. svg files of antd-mobile
             // path.resolve(__dirname, "./app/dist/"),  // folder of svg files in your project
            ]
        }],
    },
    resolve: {
        //modulesDirectories: ['node_modules', path.join(__dirname, './node_modules')],
        // 现在你import文件的时候可以直接使用import Func from './file'，不用再使用import Func from './file.js'
        modules: ['app', 'node_modules', path.join(__dirname, './node_modules')],
        extensions: ['.web.js','.js', '.jsx', '.json', '.coffee']
    },
    devServer: {
        proxy: {
            '/api': { // 代理的路径
            target: 'http://127.0.0.1:80',//钟梵伊IP
            //target: 'http://172.16.133.211:9215', //钟梵伊211
            //target: 'http://172.16.140.31:8080',//王华杰IP
            //target: 'http://192.168.1.106',
            secure: false,
            }
        }
    },
    plugins: [
        /*
        template参数指定入口html文件路径, 插件会把这个文件交给webpack去编译,
        webpack按照正常流程, 找到loaders中test条件匹配的loader来编译, 那么这里html-loader就是匹配的loader
        html-loader编译后产生的字符串, 会由html-webpack-plugin储存为html文件到输出目录, 默认文件名为index.html
        可以通过filename参数指定输出的文件名
        html-webpack-plugin也可以不指定template参数, 它会使用默认的html模板.
        */
        new HtmlWebpackPlugin({
            template: './app/index.html'
        }),
        new ExtractTextPlugin('./resource/[name].css'),
        new webpack.optimize.CommonsChunkPlugin(
            {   
                name: "vendor",
            }
        ),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.optimize.UglifyJsPlugin({
            // 最紧凑的输出
            beautify: false,
            // 删除所有的注释
            comments: false,
            compress: {
                // 在UglifyJs删除没有用到的代码时不输出警告  
                warnings: false,
                // 删除所有的 `console` 语句
                // 还可以兼容ie浏览器
                drop_console: true,
                // 内嵌定义了但是只用到一次的变量
                collapse_vars: true,
                // 提取出出现多次但是没有定义成变量去引用的静态值
                reduce_vars: true,
            }
        })
    ]
    }
}